<template>
	<view>
		<u-navbar :is-back="true" title="" :background="{backgroundColor: '#00a8ff'}">
			<view class="slot-wrap">
				<u-avatar :src="science.user_info?oss+science.user_info.avatar:''" size="40"></u-avatar>
				<view class="" style="color: #FFFFFF;margin-left: 15rpx;">
					{{science.user_info?science.user_info.nickname:''}}
				</view>
			</view>
			<view class="navbar-right" slot="right">
				<u-icon name="zhuanfa" color="#ffffff" size="36" style="margin-right: 20rpx;margin-top: 20rpx;">
				</u-icon>
			</view>
		</u-navbar>
		<!-- 轮播图 -->
		<view class="wrap">
			<u-swiper :list="list" height="700"></u-swiper>
		</view>
		<!-- 科普详情 -->
		<view class="u-p-26">
			<view>
				<view class="u-font-16 u-m-b-26">
					{{science.title}}
				</view>
				<view class="u-m-b-26">
					{{science.content}}
				</view>
				<view class="">
					<view class="" v-if="science.updatetime!=''"
						style="display: inline-block;padding: 5rpx 0rpx;font-size: 22rpx;color: #c3c3c3;">
						{{$u.timeFormat(science.updatetime, 'yyyy-mm-dd')}}
					</view>
					<view class="" v-else
						style="display: inline-block;padding: 5rpx 0rpx;font-size: 22rpx;color: #c3c3c3;">
						{{$u.timeFormat(science.createtime, 'yyyy-mm-dd')}}
					</view>
					<view class="yyw" @click="openinfo('/pages/tabBar/scienceCenter/complain?id='+science.id)">
						有疑问？
					</view>
				</view>
			</view>
		</view>
		<!-- 评论列表 -->
		<view class="bgFFFFFF u-p-r-26 u-p-l-26 u-m-b-26 u-p-b-50">
			<view class="small_show_text u-p-t-20 u-p-b-20">
				共{{totalCount}}条评论
			</view>
			<view class="">
				评论 <text
					style="display: inline-block;width: 85%;background-color: #f7f4f8;color: #c2bfc2;padding: 10rpx 15rpx;border-radius: 25rpx;margin:0 0 0 25rpx ;">
					精彩评论将被优先展示哦</text>
			</view>
			<view class="container u-skeleton u-p-t-26 u-p-b-26 u-m-l-26 u-m-r-26"
				style="border-bottom: 1px solid #f9f9f9;">
				<view v-for="(item,index) in commentList" :key="index">
					<view class="u-flex u-col-top u-m-b-26">
						<view class="u-flex-1">
							<image :src="oss+item.user_info.avatar" style="width: 50rpx;height: 50rpx;border-radius: 50%;" mode="">
							</image>
						</view>
						<view class="u-flex-7"  @click="reply(item.id)">
							<text style="" class="name">{{item.user_info?item.user_info.nickname:''}}</text>
							<p class="u-font-12">{{item.content}}</p>
							<text class="textxiao">{{$u.timeFormat(item.createtime, 'yyyy-mm-dd')}}</text>

						</view>
						<view class="u-flex-1" style="text-align: center;">
							<u-icon v-if="item.is_comment_like=='false'" name="heart"></u-icon>
							<u-icon v-else name="heart-fill" color="#e72002"></u-icon>
							<p class="u-font-12" style="text-align: center;">{{item.like_count}}</p>
						</view>
					</view>
					<view class="">
						<view class="u-flex u-col-top"
							v-for="(item_sub_comment_list,index1) in item.sub_comment_list.items" :key="index1">
							<view class="u-flex-1">
							</view>
							<view class="u-flex-7 u-p-10">
								<view class="u-flex u-col-top">
									<view class="u-flex-1">
										<image :src="oss+item_sub_comment_list.user_info.avatar"
											style="width: 50rpx;height: 50rpx;border-radius: 50%;" mode="">
										</image>
									</view>
									<view class="u-flex-7" @click="reply(item_sub_comment_list.id)">
										<text
											style="color: #007AFF;margin-left: 20rpx;">回复{{item_sub_comment_list.to_user_info?item_sub_comment_list.to_user_info.nickname:''}}</text>
										<text
											class="name">{{item_sub_comment_list.user_info?item_sub_comment_list.user_info.nickname:''}}</text>
										<view class="u-font-12">{{item_sub_comment_list.content}}
										</view>
										<view class="textxiao">
											{{$u.timeFormat(item_sub_comment_list.createtime, 'yyyy-mm-dd')}}
										</view>
									</view>
									<view class="u-flex-1" style="text-align: center;">
										<p class="u-font-12" style="text-align: center;">
											{{item_sub_comment_list.like_count}}
										</p>
									</view>
								</view>
							</view>
						</view>
						<view class="zk" v-show="item.isShow" v-if="item.sub_comment_list.total>2"
							style="padding-left: 23%;" @click="unfold(index,id)">
							<view class="">
								展开 {{item.sub_comment_list.total}} 条回复
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 点赞收藏回复 -->
		<view class="bgFFFFFF hearView" style="position: fixed;bottom: 0rpx;">
			<u-input type="text" value="" v-model="content" :focus="fouseFa" :clearable="false" placeholder="说点什么" class="vInput"
				confirm-type="send" @confirm="send"></u-input>
			<view class="bottomFlex">
				<view class="bottomFlex1">
					<u-icon name="heart" class="icon" size="40" @click="like()"></u-icon>
					<text class="flexText">{{science.like_count}}</text>
				</view>
				<view class="bottomFlex1">
					<u-icon name="star" class="icon" size="40" @click="setfavorite()"></u-icon>
					<text class="flexText">{{science.favorite_count}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oss: 'http://zjmeifeng.oss-cn-beijing.aliyuncs.com/',
				// 科普详情
				science: [],
				// 科普评论列表
				mode: false,
				commentList: '',
				list: [],
				// 当前科普详情id
				id: '',
				// 文本框
				content: '',
				// 共多少条
				totalCount:'',
				fouseFa:false,
				for_comment_id:'',
			}
		},
		onLoad(e) {
			console.log(e);
			this.id = e.id;
			this.scienceShow(e.id);
			this.getcomment();
		},
		methods: {
			// 消息列表展开操作 查看二级列表
			unfold(index, id) {
				
				console.log(this.commentList[index].isShow);
				this.commentList[index].isShow = false;
				console.log(this.commentList[index].sub_comment_list.items, "");
				this.$forceUpdate();
				console.log("// 获取二级消息列表 //传入1级评论id");
				this.$apiCoupe.comment({
					limit: '',
					page: '',
					content_id: this.id,
					is_sub: 'true',
					start_id: id
				}).then((res) => {
					console.log("获取二级评论列表", res.data.data.items);
					this.commentList[index].sub_comment_list.items = res.data.data.items;
				}).catch((err) => {
					console.log('request fail', err);
				});
			},
			// conf  发送操作
			send() {

				console.log("发送操作");
				if (this.content != '') {
					console.log("进来了");
					
				
					this.$apiCoupe.addcomment({
						for_comment_id: this.for_comment_id,
						content_id: this.id,
						content: this.content
					}).then((res) => {
						console.log("科普二级评论操作", res.data);
						let data = res.data;
						if (data.code == 1) {
							console.log("评论成功");
							uni.showToast({
								title: "评论成功"
							})
							this.content = '';
							this.getcomment();
						}
					}).catch((err) => {
					
						console.log('request fail', err);
					});
				}
				
			},
			
			// 回复操作
			reply(for_comment_id){
				console.log("回复操作",for_comment_id);
				console.log("")
				this.for_comment_id=for_comment_id;
					this.fouseFa=true;
					this.content="@"+for_comment_id;
				
			},
			// 评论操作
			addcomment() {
				console.log("/ / / 一级 评论操作");
				this.$apiCoupe.addcomment({
					for_comment_id: '',
					content_id: this.id,
					content: this.content
				}).then((res) => {
					console.log("科普评论操作", res.data);
					let data = res.data;
					if (data.code == 1) {
						console.log("评论成功");
						uni.showToast({
							title: "评论成功"
						})
						this.content = '';
						this.getcomment();
					}
				}).catch((err) => {

					console.log('request fail', err);
				});

			},

			// 科普点赞 取消点赞
			like() {
				console.log("/ / / 科普点赞操作");
				// 传科普文章id
				this.$apiCoupe.like({
					id: this.id
				}).then((res) => {
					console.log("科普点赞操作", res.data);
					let data = res.data.data;
					if (data == "like") {
						uni.showToast({
							title: '点赞成功'
						})
					} else if (data == "unlike") {
						uni.showToast({
							title: '取消'
						})
					}
				}).catch((err) => {

					console.log('request fail', err);
				});
			},
			// 收藏 取消收藏
			setfavorite() {
				console.log("/ / / 科普收藏操作");
				// 传科普文章id
				this.$apiCoupe.setfavorite({
					id: this.id
				}).then((res) => {
					console.log("科普收藏操作", res.data);
					let data = res.data.data;
					if (data == "favorite") {
						uni.showToast({
							title: '收藏成功'
						})
					} else if (data == "unfavorite") {
						uni.showToast({
							title: '取消收藏成功'
						})
					}
				}).catch((err) => {

					console.log('request fail', err);
				});
			},
			scienceShow(id) {
				console.log("科普详情");
				this.$apiCoupe.detail({
					id: id
				}).then((res) => {
					console.log("科普详情成功数据", res.data.data);
					this.science = res.data.data;
					// 处理图潘
					let arr = res.data.data;
					if (arr.resource != null) {
						let reg = /，$/gi;
						arr.resource = arr.resource.replace(reg, "");
						let array = arr.resource.split('，');
						console.log("array", array);
						for (let key in array) {
							this.list.push({
								"image": this.oss + array[key]
							})
						}
					}
				}).catch((err) => {

					console.log('request fail', err);
				});
			},
			// 获取科普一级评论列表
			getcomment() {
				console.log("// 获取科普评论列表");
				this.$apiCoupe.comment({
					limit: '',
					page: '',
					content_id: this.id,
					is_sub: '',
					start_id: ''
				}).then((res) => {
					console.log("获取科普评论列表", res.data.data.items);
					this.totalCount=res.data.data._totalCount;
					this.commentList = res.data.data.items;
					console.log("", this.commentList);
					for (let key in this.commentList) {
						this.commentList[key].isShow = true;
					}
					console.log("", this.commentList);
				}).catch((err) => {

					console.log('request fail', err);
				});
			},
			openinfo(url) {
				uni.navigateTo({
					url: url,
				});
			},
			toTaList() {

			},
			ckBack() {

			}
		}
	}
</script>

<style scoped lang="scss">
	.slot-wrap {
		display: flex;
		align-items: center;
		/* 如果您想让slot内容占满整个导航栏的宽度 */
		/* flex: 1; */
		/* 如果您想让slot内容与导航栏左右有空隙 */
		/* padding: 0 30rpx; */
	}

	.textxiao {
		color: #bdbcbd;
		font-size: 22rpx;
	}

	.zk {
		color: #87b0e7;
		font-size: 24rpx;
	}

	.name {
		color: #bdbcbd;
	}

	.yyw {
		padding: 0;
		color: #c3c3c3;
		border: #c3c3c3 1rpx solid;
		display: inline-block;
		border-radius: 25rpx;
		font-size: 22rpx;
		padding: 5rpx 15rpx;
		float: right;
		display: inline-block;
	}

	.hearView {
		padding: 26rpx;
		border-top: 1px solid #000000;
		width: 100%;
		display: flex;

		.bottomFlex {
			flex: 4;
			display: flex;

			.bottomFlex1 {
				flex: 1;
				padding-top: 15rpx;

				.flexText {
					position: relative;
					top: -5rpx;
				}

				.icon {
					margin-right: 15rpx;
				}
			}
		}

		.vInput {
			display: inline-block;
			background-color: #f7f5f6;
			border-radius: 25rpx;
			padding: 15rpx 25rpx;
			flex: 6;
			margin-right: 50rpx;
		}

	}
</style>
